Wishlist Module – Low Level Design

💖 Step 9: Wishlist Module – LowLevel Design (LLD)

This document details the low-level design of the wishlist feature module that manages the user’s saved items in the Angular e-commerce frontend.

📦 Module Structure

src/
├── app/
│   └── features/
│       └── wishlist/
│           ├── components/
│           │   ├── wishlist-list/
│           │   ├── wishlist-item/
│           ├── services/
│           │   └── wishlist.service.ts
│           ├── store/
│           │   ├── wishlist.actions.ts
│           │   ├── wishlist.reducer.ts
│           │   ├── wishlist.effects.ts
│           │   └── wishlist.selectors.ts
│           ├── models/
│           │   └── wishlist.model.ts
│           ├── wishlist-routing.module.ts
│           └── wishlist.module.ts

🧱 Component Breakdown

📋 WishlistListComponent

• Displays list of wishlist items
• Allows bulk remove or move to cart
• Shows product summary: name, price, thumbnail

⭐ WishlistItemComponent

• Represents individual wishlist item
• Provides options to remove or add to cart
• Shows availability and price changes

🧪 Service: WishlistService

Handles API operations related to wishlist.

@Injectable({ providedIn: "root" })
export class WishlistService {
  private baseUrl = "/api/wishlist";

  constructor(private http: HttpClient) {}

  getWishlist(userId: string): Observable<WishlistItem[]> {
    return this.http.get<WishlistItem[]>(`${this.baseUrl}?userId=${userId}`);
  }

  addItem(userId: string, productId: string): Observable<WishlistItem> {
    return this.http.post<WishlistItem>(this.baseUrl, { userId, productId });
  }

  removeItem(itemId: string): Observable<void> {
    return this.http.delete<void>(`${this.baseUrl}/${itemId}`);
  }
}

🧩 NgRx Store (optional)

✅ Actions – wishlist.actions.ts

export const loadWishlist = createAction(
  "[Wishlist] Load Wishlist",
  props<{ userId: string }>()
);
export const loadWishlistSuccess = createAction(
  "[Wishlist] Load Wishlist Success",
  props<{ items: WishlistItem[] }>()
);
export const addWishlistItem = createAction(
  "[Wishlist] Add Item",
  props<{ userId: string; productId: string }>()
);
export const addWishlistItemSuccess = createAction(
  "[Wishlist] Add Item Success",
  props<{ item: WishlistItem }>()
);
export const removeWishlistItem = createAction(
  "[Wishlist] Remove Item",
  props<{ itemId: string }>()
);
export const removeWishlistItemSuccess = createAction(
  "[Wishlist] Remove Item Success",
  props<{ itemId: string }>()
);

🔁 Reducer – wishlist.reducer.ts

Manages wishlist items list and loading flags.

🌐 Effects – wishlist.effects.ts

Performs async API calls for loading, adding, and removing wishlist items.

🔍 Selectors – wishlist.selectors.ts

export const selectWishlistItems = createSelector(
  selectWishlistState,
  (state) => state.items
);

🔄 API Contracts

📐 Models

export interface WishlistItem {
  id: string;
  userId: string;
  productId: string;
  productName: string;
  price: number;
  thumbnailUrl: string;
  available: boolean;
}

🚦 Routing & Guards

const routes: Routes = [
  { path: "", component: WishlistListComponent, canActivate: [AuthGuard] },
];

🔐 Security & UX

• Protect routes with AuthGuard
• Confirm before removing items
• Provide feedback via snackbar on add/remove
• Handle product availability changes gracefully

✅ Responsibilities Summary